HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】
モバイルHTMLシリーズ
HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか おすすめ
iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう
iOS6のSafariでサポートされるHTML5の機能
HTML5で使えるスマートフォンの機能
スマートフォンサイトのパフォーマンスチューニング
スマートフォンサイト用の軽量ライブラリ QUOjs
HTML5のWebアプリで使えるジェスチャーにはどんなものがあるのか調べていたら、QUOjsというライブラリを見つけたので試してみました。 サイズが16KBと軽量なライブラリですが、簡単にイベント処理を実装できるので便利です。今回使ったバージョンは2.2.0 になります。
以下のサイトからダウンロードできます。
QuoJS
英語ですが以下のページに使い方が書いてあります。
QuoJS/README.md at master · soyjavi/QuoJS · GitHub
以下の8つのジェスチャを使ったサンプルを作ってみました。
- タッチ系
- タッチ：画面をタッチします。
- タップ：画面をタッチして離します。
- ホールド：画面をタッチし続けます。
- ダブルタップ：画面をすばやく2回タップします。
- スワイプ系
- スワイプ：画面をタッチしたままスライドさせます。
- ドラッグ：2本の指で画面をタッチしたままスライドさせます。
- ピンチ：2本の指で画面をタッチし、それらの指を近づけます(離します)。
- 回転：2本の指で画面をタッチし、時計回りまたは反時計回りに回転させます。
iPhone 5(iOS6)のSafari と Galaxy S3(Android 4.04)のChrome
で動作確認しています。
タッチ系
タッチ、タップ、ホールド、ダブルタップのサンプルです。4つのボタンに１つずつイベントが割り当てられています。
イベントが発生したらアラートを表示します。
QUOjsの使い方を簡単に説明します。基本的にはjQueryに似ています。先頭は$ではなく$$で始まります。
$$(document).ready(function(){
という箇所がありますが、これはjQueryの
$(document).ready(function(){
もしくは
$(function(){
と同じで最初に呼び出されます。
イベントハンドラの渡し方なども先頭が$$になっている以外はjQueryと同じです。
ブラウザのジェスチャ機能と競合する場合があるので、ブラウザのジェスチャ機能を無効にする必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>タッチサンプル</title>
<script src="quo.js"></script>
<script>
$$(document).ready(function(){
$$('#button1').touch(function(){ alert(event.type); });
$$('#button2').tap(function(){ alert(event.type); });
$$('#button3').hold(function(){ alert(event.type); });
$$('#button4').doubleTap(function(){ alert(event.type); });
// ブラウザのジェスチャー機能をキャンセル
$$("#button3").on("touchstart",function(){
event.preventDefault();
});
$$("#button3").on("gesturestart",function(){
event.preventDefault();
});
});
</script>
<style>
button {
width:100%;
height:100px;
-webkit-appearance:none;
}
</style>
</head>
<body>
<button id="button1">Touch</button>
<button id="button2">Tap</button>
<button id="button3">Hold</button>
<button id="button4">Double Tap</button>
</body>
</html>
スワイプ系
スワイプとドラッグのサンプルです。swipeイベント、dragイベントが発生したらアラートを表示します。
スワイプのイベントにはこの他に以下の5種類のイベントがあります。
特定の方向のスワイプイベントや処理中のイベントを取得したい場合はこちらを利用します。
- swipeUp：上にスワイプした場合のイベントです。
- swipeRight：右にスワイプした場合のイベントです。
- swipeDown：下にスワイプした場合のイベントです。
- swipeLeft：左にスワイプした場合のイベントです。
- swiping：スワイプ中もしくはドラッグ中の場合のイベントです。1回スワイプ(ドラッグ)する間に何回か発生します。
2本指でのスワイプした場合はdragというイベントが発生します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>スワイプサンプル</title>
<script src="quo.js"></script>
<script>
$$(document).ready(function(){
$$('#canvas').swipe(function(){
alert(event.type
+ " from " + event.iniTouch.x + ":" + event.iniTouch.y
+ " to " + event.currentTouch.x + ":" + event.currentTouch.y);
});
$$('#canvas').drag(function(){
alert(event.type);
});
// ブラウザのジェスチャー機能をキャンセル
$$("#canvas").on("touchstart",function(){
event.preventDefault();
});
$$("#canvas").on("gesturestart",function(){
event.preventDefault();
});
});
</script>
<style>
body {
margin:0px;
width: 100%;
height:100%;
}
div {
position: absolute;
background-color: #dddddd;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
ピンチ
ピンチのサンプルです。pinchイベントが発生したらアラートを表示します。
pinchイベントの他には2本の指を近づけた場合のイベント(ピンチイン)と離した場合のイベント(ピンチアウト)、処理中のイベントがあります。
特定の方向のpinchイベントや処理中のイベントを取得したい場合はこちらを利用します。
- pinchIn：ピンチインした場合のイベントです。
- pinchOut：ピンチアウトした場合のイベントです。
- pinching：処理中のイベントです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>ピンチサンプル</title>
<script src="quo.js"></script>
<script>
$$(document).ready(function(){
$$('#canvas').pinch(function(){
alert(event.type);
});
// ブラウザのジェスチャー機能をキャンセル
$$("#canvas").on("touchstart",function(){
event.preventDefault();
});
$$("#canvas").on("gesturestart",function(){
event.preventDefault();
});
});
</script>
<style>
body {
margin:0px;
width: 100%;
height:100%;
}
div {
position: absolute;
background-color: #dddddd;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
回転
回転のイベントです。rotateイベントが発生したらアラートを表示します。
rotateイベントの他には時計回りに回転した場合のイベントと反時計回りに回転した場合のイベント、回転中のイベントがあります。
特定の方向のrotateイベントや処理中のイベントを取得したい場合はこちらを利用します。
angleプロパティから回転角度を取得することができます。
- rotateRight：時計回りに回転した場合のイベントです。
- rotateLeft：反時計回りに回転した場合のイベントです。
- rotating：回転中の場合のイベントです。1回、回転する間に何回か発生します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>回転サンプル</title>
<script src="quo.js"></script>
<script>
$$(document).ready(function(){
$$('#canvas').rotate(function(){
alert(event.type + " angle:" + event.angle);
});
// ブラウザのジェスチャー機能をキャンセル
$$("#canvas").on("touchstart",function(){
event.preventDefault();
});
$$("#canvas").on("gesturestart",function(){
event.preventDefault();
});
});
</script>
<style>
body {
margin:0px;
width: 100%;
height:100%;
}
div {
position: absolute;
background-color: #dddddd;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
まとめ
今回は QUOjs で使えるジェスチャーに絞って調査しました。jQueryと同じように使えるので使いやすかったです。
QUOjsのトップページを見ると、この他に2× FINGERS TAP、2× DOUBLE TAP、FINGERSというイベントがあったのですが、
APIにサンプルなどがなかったので調査中です。QUOjs は他にもAjax通信などの機能もあるので今度試してみたいと思います。
